<template>
	<view tabindex="1" @focus="focus" @blur="blur" @click="onClick" ref="fastSelect" class="fast-select">
		<slot></slot>
		<transition name="fast-select">
			<view v-show="showSelect" class="select-frame">
				<view class="select-point"></view>
				<view class="fast-select-list">
					<view class="fast-select-rolling">
						<fast-select-radio 
							v-if="mode === 'radio'" 
							:data="data" 
							:value="value" 
							:label="label" 
							@change="onChange" 
						/>
						<fast-select-key
							v-else-if="mode === 'key'" 
							:data="data" 
							:value="value" 
							:key="index" 
							:label="label" 
							@change="onChange" 
						/>
						<fast-select-both
							v-else-if="mode === 'both'" 
							:data="data" 
							:value="value"
							:interval="interval"
							@change="onChange" 
						/>
					</view>
				</view>
			</view>
		</transition>
	</view>
</template>
<script>
	import fastSelectRadio from './fast-select-radio.vue'
	import fastSelectKey from './fast-select-key.vue'
	import fastSelectBoth from './fast-select-both.vue'
	
export default {
	props: {
		value: {
			type: Array,
			default: () => {
				return []
			}
		},
		mode: {
			type: 'radio' | 'key' | 'both',
			default: 'radio'
		},
		label: {
			type: String,
			default: ''
		},
		index: {
			type: String,
			default: 'key'
		},
		//下拉框数据源
		data: {
			type: Array,
			default: () => {
				return []
			}
		},
		interval: {
			type: String,
			default: ''
		},
	},
	data(){
		return {
			showSelect: false
		}
	},
	components: {
		fastSelectRadio,
		fastSelectKey,
		fastSelectBoth
	},
	methods: {
		focus(){
			// this.showSelect = true
		},
		blur(){
			this.showSelect = false
		},
		onClick(){
			this.showSelect = !this.showSelect
		},
		onChange(item, index){
			this.showSelect = false
			this.$emit('input', this.value)
			this.$emit('change', item, index)
		}
	}
}
	
	
</script>
<style lang="less" scoped>
	.fast-select{
		position: relative;
		
		.fast-select-leave-active, .fast-select-enter-active{
			transition: opacity 0.1s linear 0s;;
		}
		.fast-select-enter, .fast-select-leave-to {
		  opacity: 0.5;
		}
		
		
		.select-frame{
			position: absolute;
			display: flex;
			flex-flow: column;
			align-items: center;
			font-size: 0.9em;
			
			.fast-select-list{
				background-color: #000;
				width: 70vw;
				background-color: #fff;
				padding: 2vw;
				border-radius: 2vw;
				box-shadow: 0 0 20px 5px rgba(0, 0, 0, .3);
				z-index: 999;
				
				.fast-select-rolling{
					max-height: 60vw;
					overflow: auto;
				}
				
				.fast-select-rolling::-webkit-scrollbar {
					width: 1vw; /* 设置滚动条的宽度 */
				}
				.fast-select-rolling::-webkit-scrollbar-thumb {
				  background: #888; /* 设置滑块的背景颜色 */
				  border-radius: 0.5vw;
				}
			}
			
			.select-point{
				margin-bottom: -1px;
				width: 0;
				height: 0;
				border-left: 2vw solid transparent;
				border-right: 2vw solid transparent;
				border-bottom: 2vw solid white;
				z-index: 1000;
			}
			
		}
	}
	
	
</style>
